<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>活动统计管理</title>
	<meta name="decorator" content="default"/>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/base.css">
	<style type="text/css">
		<style type="text/css">
		a{
		    white-space: normal;
		    word-break: break-all;
		}
		table tr td{
			white-space: normal;
		    word-break: break-all;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			
		});
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
	</script>
</head>
<body>
	<div class="col-xs-6">
		<div class="row-space">
			<div class="e-box float-e-margins" style="height: 470px;">
				<div class="e-box-title">
					<h2>活动统计</h2>
				</div>
				<div class="e-box-content">
					<div id="zjtr" style="width: 100%; height: 420px;"></div>
				</div>
			</div>
		</div>
	</div>
	<form:form id="searchForm" modelAttribute="homeApprove" action="${ctx}/approve/planStatistic/" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<input id="month" type="hidden" value="${month}"/>
		<ul class="ul-form">
			<li><label>社区类型：</label>
				<form:select path="partyTypeId" class="input-medium" id="partyTypeSelect">
					<form:option value="" label="全部"/>
					<form:options items="${fns:getPartyType()}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</li>
			<li><label>状态：</label>
				<form:select path="jhstate" class="input-medium" id="jhstateSelect" style="width:80px">
					<form:option value="" label="全部"/>
					<form:options items="${fns:getLifeStateFlag('3,7')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</li>
			<li><label>年度：</label>
				<form:select path="year" class="input-medium" id="yearSelect" onchange="queryMonth()" style="width:80px">
					<form:options items="${fns:findAssessmentTimeList()}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</li>
			<li><label>月份：</label>
				<form:select path="month" class="input-medium" id="monthSelect" style="width:80px">
					<form:option value="" label="全部"/>
				</form:select>
			</li>
			<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="button" onclick="query()" value="查询"/></li>
			<li class="btns"><input id="btnExport" class="btn btn-primary" type="button" value="导出" onclick="exportExcel()"/></li>
		</ul>
	</form:form>
	<sys:message content="${message}"/>
	<table id="contentTable" class="table table-striped table-bordered table-condensed" style="width:100%;table-layout:fixed;">
		<thead>
			<tr>
				<th width="20%">活动名称</th>
				<th width="15%">所属支部</th>
				<th>分类</th>
				<th width="5%">状态</th>
				<th width="12%">开始时间</th>
				<th width="12%">结束时间</th>
				<th width="12%">活动地点</th>
				<shiro:hasPermission name="approve:planStatistic:view"><th>操作</th></shiro:hasPermission>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${page.list}" var="homeApprove">
			<tr>
				<td>
					${homeApprove.lifename}
				</td>
				<td>
					${homeApprove.organizationName}
				</td>
				<td>
					${homeApprove.typeNames}
				</td>
				<td style="text-align:center">
					${fns:getDictLabel(homeApprove.jhstate, 'life_state_flag', '')}
				</td>
				<td style="text-align:center">
					<fmt:formatDate value="${homeApprove.starttime}" pattern="yyyy-MM-dd HH:mm:ss"/>
				</td>
				<td style="text-align:center">
					<fmt:formatDate value="${homeApprove.endtime}" pattern="yyyy-MM-dd HH:mm:ss"/>
				</td>
				<td style="text-align:center">
					${homeApprove.adress}
				</td>
				<shiro:hasPermission name="approve:planStatistic:view">
					<td style="text-align:center">
	    				<a href="${ctx}/approve/planStatistic/form?id=${homeApprove.id}">查看</a>
					</td>
				</shiro:hasPermission>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
	<script src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath}/static/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<!-- 统计图 -->
	<script type="text/javascript">
	$(function(){
		var partyTypeId = $("#partyTypeSelect").find("option:selected").val();
		var jhstate = $("#jhstateSelect").find("option:selected").val();
		var year = $("#yearSelect").find("option:selected").val();
		var month = $("#month").val();
		findPlanStatisticChart(partyTypeId,jhstate,year,month);
		queryMonth();
		$("#monthSelect").find("option[value='"+month+"']").attr("selected",true);
	});
	
	//查询按钮点击事件
	function query(){
		var partyTypeId = $("#partyTypeSelect").find("option:selected").val();
		var jhstate = $("#jhstateSelect").find("option:selected").val();
		var year = $("#yearSelect").find("option:selected").val();
		var month = $("#monthSelect").find("option:selected").val();
		$("#searchForm").submit();
		findPlanStatisticChart(partyTypeId,jhstate,year,month);
	}

	//年度change事件，加载月份
	function queryMonth(){
		var year = $("#yearSelect").find("option:selected").val();
		var date = new Date();
		var currentYear = date.getFullYear();
		var currentMonth = date.getMonth() + 2;
		var monthChar = ['全部','一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
		if(currentYear > year){
			currentMonth = 13;
		}
		$("#monthSelect").empty();
		for(var i=0; i<currentMonth; i++){
			if(i==0){
				var html = "<option value=''>全部</option>";
				$("#monthSelect").append(html);
			}else{
				if(i>=10){
					var html = "<option value='"+i+"'>"+monthChar[i]+"</option>";
					$("#monthSelect").append(html);
				}else{
					var html = "<option value='0"+i+"'>"+monthChar[i]+"</option>";
					$("#monthSelect").append(html);
				}
			}
		}
	}
	
	var options = {
		legend : {
			show : false,
			data:['党组织活动次数']
		},
		xAxis : {
			axisLabel : {
				textStyle : {
					fontSize : 10
				},
				rotate : 10
			},
			data : []
		},
		yAxis : {
			name : '次数',
			axisLabel : {
				textStyle : {
					fontSize : 10
				},
				formatter : function(value, index) {
					return value;
				}
			}
		},
		series : [ {
			name : '组织名称',
			type : 'bar',
			barMinHeight : 10,
			label : {
				normal : {
					show : true,
					position : 'top',
					textStyle : {
						fontWeight : 'bold',
						fontSize : 10
					}
				}
			},
			itemStyle : {
				normal : {
					color : function(params) {
						var colorList = [ '#cc3333', '#146ddc', '#f99d41',
							'#67b320', '#cc3333', '#146ddc', '#f99d41','#EFE42A','#EE9201','#B74AE5' ];
						return colorList[params.dataIndex];
					},
					opacity : 0.8
				}
			},
			data : []
		} ]
	};
	
	//查询前10名党组织活动次数
	function findPlanStatisticChart(partyTypeId,jhstate,year,month){
		$.ajax({
			url:'${ctx}/approve/planStatistic/findPlanStatisticChart',
			type:"post",
			data:{
				"partyTypeId":partyTypeId,
				"jhstate":jhstate,
				"year":year,
				"month":month
			},
			dataType:"json",
			success:function(data){
				var orgName = [];
				var num = [];
				for(var i in data){
					orgName.push(data[i].organizationName); 
					num.push(data[i].column28);
				}
				options.series[0].data = num;
				options.xAxis.data = orgName;
				var zjtrChart = echarts.init(document.getElementById('zjtr'));
			    zjtrChart.setOption(options);
			}
		});
	}
	
	//导出excel
	function exportExcel(){
		var partyTypeId = $("#partyTypeSelect").find("option:selected").val();
		var jhstate = $("#jhstateSelect").find("option:selected").val();
		var year = $("#yearSelect").find("option:selected").val();
		var month = $("#monthSelect").find("option:selected").val();
		document.location.href = "${ctx}/approve/planStatistic/exportExcel?partyTypeId="+partyTypeId+"&jhstate="+jhstate+"&year="+year+"&month="+month;
	}
	
	</script>
</body>
</html>